import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import { Feather } from "@expo/vector-icons";

const SearchBox = (props) => {
  const [item, setItem] = useState([]);
  return (
    <View style={styles.container}>
      <View style={styles.searchContainer}>
        <View style={styles.inputBox}>
          <Feather
            style={styles.inputSearch}
            name="search"
            size={20}
            color="#51A9FF"
          />
          <TextInput
            style={styles.inputText}
            placeholder="请输入商品/材料"
            autoFocus
            clearButtonMode="while-editing"
            onChangeText={(text) => setItem(text)}
            onSubmitEditing={() => {
              // alert(item);
              props.addHistoryData(item);
              props.goSearch(item);
            }}
          />
          <TouchableOpacity></TouchableOpacity>
        </View>
        <TouchableOpacity
          style={styles.cancelOption}
          onPress={() => props.onSearchCancel()}
        >
          <Text style={styles.cancelText}>取消</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffffff",
    marginBottom: 10,
  },
  searchContainer: {
    paddingTop: 10,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    justifyContent: "space-between",
  },
  inputBox: {
    flex: 1,
    flexDirection: "row",
    height: 38,
    borderRadius: 5,
    alignItems: "center",
    backgroundColor: "#F2F2F2",
    marginRight: 10,
  },
  inputText: {
    fontSize: 16,
    color: "#9d9d9d",
    // marginLeft: 10,
    flex: 1,
  },
  inputSearch: {
    marginLeft: 10,
    marginRight: 10,
  },
  cancelOption: {
    // marginLeft: 20,
    alignItems: "center",
  },
  cancelText: {
    fontSize: 16,
  },
});

export default SearchBox;
